<template>
  <div class="container">
    <div class="hotelItem">
      <div class="hotelItem_imgbox">
        <img
          src="https://userimg.qunarzz.com/imgs/201610/26/C._M0DCiLB_JILWlBsi480s.jpg"
          alt
          class="hotelItem_imgbox_img"
        />
      </div>

      <div class="hotelItem_detail">
        <h3>Jackie优品酒店(jackie地铁站店)</h3>

        <div class="hotelItem_detail_spell">Jackie hotel (jackie subway dian)</div>

        <div class="hotelItem_detail_type">
          <div class="iconfont icon-huangguan" style="color: #ff9900;"></div>
          <span>不知死活型</span>
        </div>

        <div class="hotelItem_detail_comment">
          <el-rate
            class="hotelItemScore"
            v-model="hotelItemScore"
            disabled
            show-score
            text-color="#ff9900"
            :score-template="`${hotelItemScore}分`"
          ></el-rate>

          <span>
            <i>88</i> 条评论
          </span>
          <span>
            <i>88</i> 篇游记
          </span>
        </div>

        <div class="hotelItem_detail_position">
          <i class="el-icon-location"></i>
          <span>位于：广州市天河区吉珠路58号</span>
        </div>
      </div>

      <div class="hotelItem_partner">
        <div class="hotelItem_partner_item">
          <span>协成</span>
          <span class="hotelItem_partner_item_left">
            <em>￥888</em>
            起
            <i class="el-icon-arrow-right"></i>
          </span>
        </div>
      </div>
    </div>

    <!-- 复制酒店项目 -->
    <div class="hotelItem">
      <div class="hotelItem_imgbox">
        <img
          src="https://userimg.qunarzz.com/imgs/201610/26/C._M0DCiLB_JILWlBsi480s.jpg"
          alt
          class="hotelItem_imgbox_img"
        />
      </div>

      <div class="hotelItem_detail">
        <h3>Jackie优品酒店(jackie地铁站店)</h3>

        <div class="hotelItem_detail_spell">Jackie hotel (jackie subway dian)</div>

        <div class="hotelItem_detail_type">
          <div class="iconfont icon-huangguan" style="color: #ff9900;"></div>
          <span>不知死活型</span>
        </div>

        <div class="hotelItem_detail_comment">
          <el-rate
            class="hotelItemScore"
            v-model="hotelItemScore"
            disabled
            show-score
            text-color="#ff9900"
            :score-template="`${hotelItemScore}分`"
          ></el-rate>

          <span>
            <i>88</i> 条评论
          </span>
          <span>
            <i>88</i> 篇游记
          </span>
        </div>

        <div class="hotelItem_detail_position">
          <i class="el-icon-location"></i>
          <span>位于：广州市天河区吉珠路58号</span>
        </div>
      </div>

      <div class="hotelItem_partner">
        <div class="hotelItem_partner_item">
          <span>协成</span>
          <span class="hotelItem_partner_item_left">
            <em>￥888</em>
            起
            <i class="el-icon-arrow-right"></i>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 只读的评分
      hotelItemScore: 3.5
    };
  }
};
</script>

<style lang="less" scoped>
.container {
  margin-top: 30px;
  background: rgba(255, 255, 255, 0.5);

  .hotelItem {
    display: flex;
    justify-content: space-between;
    padding: 30px 0;
    border-bottom: 1px solid #ddd;

    &_imgbox {
      &_img {
        width: 320px;
        height: 210px;
        object-fit: cover;
      }
    }

    &_detail {
      flex: 1;
      margin-left: 20px;

      h3 {
        font-weight: normal;
        font-size: 22px;
        color: #333;
      }

      &_spell {
        font-size: 16px;
        color: #999;
      }

      &_type {
        display: flex;
        font-size: 14px;
        color: #888;
        padding: 6px 0px;

        > span {
          margin-left: 4px;
        }
      }

      &_comment {
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
        align-items: flex-end;

        .hotelItemScore {
          background-color: rgba(0, 0, 0);
          padding: 2px;
          padding: 0px 6px 2px 6px;
          border-radius: 12px;
        }

        span {
          font-size: 13px;
          color: #333;

          > i {
            color: #ff9e48;
          }
        }
      }

      &_position {
        margin-top: 10px;

        .el-icon-location {
          color: #666;
          font-size: 16px;
        }

        > span {
          font-size: 14px;
          color: #333;
        }
      }
    }

    &_partner {
      width: 240px;
      margin-left: 50px;
      margin-top: 30px;

      &_item {
        display: flex;
        line-height: 36px;
        border-bottom: 1px solid #ddd;
        padding-left: 10px;

        > span {
          flex: 1;
        }

        &_left{
          font-size: 16px;
        }
      }
    }
  }
}
</style>